<template>
	<div class="search">
		<div class="search-header border-1px">
			<div class="sh-back"
				@click="goBack()" 
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="sh-content">
				<select id="select-cate"
					@change="changeType"
				>
					<option value="淘宝">
						淘宝
					</option>
					<option value="京东">
						京东
					</option><option value="拼多多">
						拼多多
					</option>
				</select>
				<i class="iconfont" @change="changeType">&#xe6a7;</i>
				<input type="text" 
					placeholder="先领券再购物" 
					v-model.trim="keyword"
				>
			</div>
			<div class="sh-btn"
				@click="goSearch()"
			>
				<p>搜索</p>
			</div>
		</div>
		<div class="float-key"
			v-if="this.keyList.length > 0"
		>
			<div class="fy-item border-1px"
				v-for="(item, index) in keyList"
				@click="goKey(item)"
			>
				<p v-html="item[0]"></p>
				<i class="iconfont">&#xe787;</i>
			</div>
		</div>
		<div class="no-place"></div>
		<div class="search-content">
			<h1>大家都在搜</h1>
			<div class="sc-items">
				<div class="sc-item"
					v-for="(item, index) in moreList"
					@click="goSea(index)"
				>
					<p>{{item.keyword}}</p>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="search-content"
			v-if="list.length > 0"
		>
			<div class="sc-header">
				<p>历史搜索</p>
				<i class="iconfont"
					@click="clearHistory"
				>&#xe639;</i>
			</div>
			<ul class="sc-items">
				<li class="sm-item"
					v-for="(item, index) in list"
					@click="goSear(index)"
				> 
					<p class="one_line">{{item.title}}</p>
				</li>
				<li class="clear"></li>
			</ul>
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		data () {
			return{
				id: 1,
				keyword: '',
				list: [],
				moreList: [],
				keyList: [],
			}
		},
		mounted: function(){
			var showCate = document.getElementById('select-cate');
			if(this.id == 1){
				showCate.options[0].selected = true;
			}else if (this.id == 2){
				showCate[1].selected = "selected";
			}else if (this.id == 3){
				showCate.options[2].selected = true;
			}
			this.getData();
			var more = localStorage.getItem("options");
			if(more != undefined && more.length > 0){
				this.list = JSON.parse(more);
			}
			if(this.list === null ){
				this.list = [];
			}
		},
		watch: {
			keyword: function(){
				this.getKeyword()
			}
		},
		methods: {
			goBack: function(){
				this.$router.push('/')
			},
			goSearch: function(){
				if(this.keyword == ''){
					Toast('查询不能为空')
				}else{
					let keyword = this.keyword;
					if(this.list == null){
						this.list.push({'title': keyword});
					}else{
						var y;
						for(var i = 0,len = this.list.length; i < len; i++){
							if( this.list[i].title === keyword){
								y=2;
							}
						}
						if(y!=2){
							this.list.push({"title": keyword});
						}
					}
					var str = JSON.stringify(this.list);
					localStorage.setItem("options", str); 
					var job = localStorage.getItem("options");
					this.list= JSON.parse(job);
					this.$router.push('/searchdetail/' + this.id + '/' + keyword)
				}	
			},
			getKeyword: function(){
				this.$jsonp('https://suggest.taobao.com/sug?code=utf-8&q=' + this.keyword + '&_ksTS=1537438744083_997&k=1&area=c2c&bucketid=7&qq-pf-to=pcqq.c2c').then( res => {
					var ret =res.result;
					this.keyList = ret;
				})
			},
			goSear: function(index){
				let keyword = this.list[index].title;
				this.$router.push('/searchdetail/' + this.id + '/' + keyword)
			},
			goKey: function(item){
				let keyword = item[0];
				this.$router.push('/searchdetail/' + this.id + '/' + keyword)
			},
			goSea: function(index){
				let keyword = this.moreList[index].keyword;
				if(this.list == null){
					this.list.push({'title': keyword});
					var str = JSON.stringify(this.list);
					localStorage.setItem("options", str);
					this.$router.push('/searchdetail/' + this.id + '/' + keyword);
				}else{
					var y,z;
					for(var i = 0, len = this.list.length; i < len; i++){
						if( this.list[i].title === keyword){
							y=2;
							z=i;
						}
					}
					if(y!=2){
						this.list.push({"title": keyword});
						var str = JSON.stringify(this.list);
						localStorage.setItem("options", str);
						this.$router.push('/searchdetail/' + this.id + '/' + keyword);
					}else if (y == 2){
						this.list.splice(z, 1);
						this.list.unshift({"title": keyword});
						var str = JSON.stringify(this.list);
						localStorage.setItem("options", str);
						this.$router.push('/searchdetail/' + this.id + '/' + keyword);
					}
				}
			},
			clearHistory: function(){
				localStorage.setItem("options", '');
				this.list = [];
			},
			changeType(val){
				if(val.target.value === '淘宝'){
					this.id = 1
				}else if(val.target.value === '拼多多'){
					this.id = 3
				}else if(val.target.value === '京东'){
					this.id = 2
				}
			},
			getData(){
				axios.get(Http.HOTKEY).then( res => {
					var ret = res.data;
					this.moreList = ret['data'];
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.search{
		width: 100%;
		background: #f9f9f8;
		.search-header{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 0.6rem;
			padding: 0.14rem 0;
			background: #fff;
			.sh-back{
				position: absolute;
				top: 0;
				left: 0;
				width: 0.88rem;
				height: 0.88rem;
				line-height: 0.88rem;
				text-align: center;
				i{
					font-size: 0.44rem;
				}
			}
			.sh-content{
				display: -webkit-box;
				    display: -webkit-flex;
				        display: -ms-flexbox;
				            display: flex;
				margin: 0 1rem 0 0.88rem;
				background: #eee;
				height: 0.6rem;
				line-height: 0.6rem;
				border-radius: 0.3rem;
				select{
					margin-left: 0.2rem;
					color: #333;
				}
				i{
					margin-top: 0.11rem;
					text-align: center;
					width: 0.44rem;
					height: 0.44rem;
					line-height: 0.44rem;
					font-size: 0.34rem;
					color: #333;
				}
				input{
					flex: 1;
					font-size: 0.20rem;
					color: #666;
					overflow: hidden;
					margin-right: 0.3rem;	
				}
			}
			.sh-btn{
				position: absolute;
				right: 0;
				top: 0;
				z-index: 1;
				height: 0.88rem;
				p{
					margin-top: 0.14rem;
					margin-right: 0.24rem;
					height: 0.6rem;
					line-height: 0.6rem;
					font-size: 0.28rem;
				}
			}
		}
		.float-key{
			position: fixed;
			top: 0.89rem;
			left: 0;
			z-index: 999;
			background: #f5f5f5;
			width: 100%;
			min-height: calc(100% - 0.89rem);
			.fy-item{
				margin-left: 4%;
				padding-right: 4%;
				width: 92%;
				height: 0.88rem;
				line-height: 0.88rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				p{
					font-size: 0.26rem;
					color: #666;
				}
				i{
					font-size: 0.34rem;
					color: #999;
				}
			}
		}
		.search-content{
			padding: 0 0.24rem;
			&:nth-of-type(4){
				border-top: 0.2rem solid #eee;
				min-height: 8rem;
			}
			.sc-header{
				position: relative;
				height: 0.66rem;
				line-height: 0.66rem;
				font-size: 0.26rem;
				color: #666;
				i{
					position: absolute;
					top: 0;
					right: 0;
					display: block;
					width: 0.66rem;
					height: 0.66rem;
					font-size: 0.4rem;
					text-align: right;
				}
				p{
					text-align: left;
					font-weight: 700;
					font-size: 0.28rem;
					color: #333;
				}
			}
			h1{
				margin-bottom: 0.3rem;
				margin-top: 0.3rem;
				text-align: left;
				font-size: 0.28rem;
				font-weight: 700;
			}
			.sc-items{
				.sc-item{
					float: left;
					margin-right: 0.2rem;
					margin-bottom: 0.2rem;
					padding: 0 0.3rem;
					height: 0.6rem;
					line-height: 0.6rem;
					border-radius: 0.1rem;
					background: #eee;
					font-size: 0.26rem;
					// &:nth-of-type(5n+5){
					// 	margin-right: 0;
					// }
				}
				.sm-item{
					width: 96%;
					height: 0.8rem;
					line-height: 0.8rem;
					padding-right: 4%;
					border-bottom: 0.01rem solid #eee;
					text-align: left;
					margin-bottom: 0.2rem;
					color: #666;
				}
			}
			
		}
	}
</style>